<template>
    <div>
        home
        <br>
        <br>
        <br>
        {{title}}
        {{userinfo.username}}
        <br>
        <button @click="getUserName">获取username</button>
        <button @click="getTitle">获取title</button>
        <br>
        <button @click="setUserName">修改username</button>
        <button @click="setTitle">修改title</button>
        <br>
        <input type="text" v-model="title">
        <br>
        <input type="text" v-model="userinfo.username">
        <br>
        {{description}}---{{click}}
        <br>
        <input type="text" v-model="description">
        <br>
        <input type="text" v-model="click">
        <br>
        <Login/>   

        <br>
        <Search />
        <br>
        <User :msg="title"/>

    </div>
</template>
<script>
import {reactive, ref, toRefs} from 'vue';
import Login from './Login.vue';
import Search from './Search.vue';
import User from './User.vue'
export default {
  name:'Home组件',
  components:{ Login ,Search, User},
  setup() {
    //   ref 定义字符串，num,bool,数组    reactive  定义响应式数据  定义对象

    var title = ref('我是一个标题')

    var userinfo = reactive({
        username:'zhangsan',
        age:20
    })
        var article = reactive({
        description:'我是一个新闻',
        click:200
    })
    // 获取reactive里面定义的数据
    var getUserName = () => {
        alert(userinfo.username)
    }
    // 获取ref里面的数据
    var getTitle = () => {
        alert(title.value)
    }
        // 修改reactive里面定义的数据
    var setUserName = () => {
        userinfo.username = 'lisi'
    }
    // 修改ref里面的数据
    var setTitle = () => {
        title.value = "修改后的ref里面的title"
    }
    return{
        title,
        userinfo,
        getUserName,
        getTitle,
        setUserName,
        setTitle,
        // ...article,  错误写法会导致article失去响应式
        ...toRefs(article)
    }
  }
}
</script>
